Preview image functionality can be easily implemented using jQuery before uploading and rotating image element functionality. You can rotate the image at a particular angle and use PHP to upload the image to the server. In this tutorial, we’ll show you how to preview the image using jQuery and rotate the image before you upload it to the server using PHP.
Before uploading, the rotating image helps the user to correct the orientation of the image when uploading images to the server. The user can preview the image with this feature and correct the orientation before uploading the file. Image rotation is very useful if you want to preview the orientation of the image and rotate the image before uploading it.
The following features will be implemented into the rotate script example image.
- Display preview of the selected image using JavaScript.
- Rotate the image clockwise or anticlockwise angle using jQuery (client-side).
- Rotate an image using the given angle in degrees using PHP (server-side).
- Upload the rotated image to the server.
Create an index.html file
Create an HTML form with a file input field (for selecting an image file), hidden input (for defining rotation degrees) and a submit button. Define an HTML element to preview the image.
- Left button rotates the image anticlockwise.
- Rigth button rotates the image clockwise.
|
2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form method="post" action="upload.php" enctype="multipart/form-data"> <input type="file" name="file" id="file" /> <input type="hidden" name="rotation" id="rotation" value="0"/> <input type="submit" name="submit" value="Upload"/> </form> <div class="img-preview" style="display: none;"> <button id="rleft">Left</button> <button id="rright">Right</button> <div id="imgPreview"></div> </div> |
Read Image Data using JavaScript
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function filePreview(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#imgPreview + img').remove(); $('#imgPreview').after('<img src="'+e.target.result+'" class="pic-view" width="300" height="auto"/>'); }; reader.readAsDataURL(input.files[0]); $('.img-preview').show(); }else{ $('#imgPreview + img').remove(); $('.img-preview').hide(); } } |
In the above code, FilePreview () is a custom JavaScript function that generates an image preview. The FileReader object helps to read the raw file data of the image using JavaScript. Once the image raw content is loaded, the image preview appends in the HTML element using jQuery.
jQuery Library is used to add, remove, and rotate image element, so include the jQuery library first.
|
2 3 4 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
jQuery to Selecting Image Preview
|
2 3 4 5 6 7 |
$("#file").change(function (){ // Image preview filePreview(this); }); |
jQuery to Rotate an Image
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
$(function() { var rotation = 0; $("#rright").click(function() { rotation = (rotation -90) % 360; $(".pic-view").css({'transform': 'rotate('+rotation+'deg)'}); if(rotation != 0){ $(".pic-view").css({'width': '300px', 'height': 'auto'}); }else{ $(".pic-view").css({'width': 'auto', 'height': '300px'}); } $('#rotation').val(rotation); }); $("#rleft").click(function() { rotation = (rotation + 90) % 360; $(".pic-view").css({'transform': 'rotate('+rotation+'deg)'}); if(rotation != 0){ $(".pic-view").css({'width': '300px', 'height': 'auto'}); }else{ $(".pic-view").css({'width': 'auto', 'height': '300px'}); } $('#rotation').val(rotation); }); }); |
The above code rotates the image on the Left/Right button click event.
- Based on the selected angle, the degree of rotation is calculated and the transform property set to rotate the image element
- Set the degree value to the rotation input field for server-side use.
Create upload.php and copy ad paste following code
Rotate and Upload Image to Server using PHP Code
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<?php $uploadPath = 'uploads/'; $statusMsg = ''; $upload = 0; if(isset($_POST['submit'])){ if(!empty($_FILES['file']['name'])){ $fileName = $_FILES['file']['name']; $fileType = $_FILES['file']['type']; $fileTemp = $_FILES['file']['tmp_name']; $filePath = $uploadPath.basename($fileName); // Allow certain file formats $allowTypes = array('image/png','image/jpg','image/jpeg','image/gif'); if(in_array($fileType, $allowTypes)){ $rotation = $_POST['rotation']; if($rotation == -90 || $rotation == 270){ $rotation = 90; }elseif($rotation == -180 || $rotation == 180){ $rotation = 180; }elseif($rotation == -270 || $rotation == 90){ $rotation = 270; } if(!empty($rotation)){ switch($fileType){ case 'image/png': $source = imagecreatefrompng($fileTemp); break; case 'image/gif': $source = imagecreatefromgif($fileTemp); break; default: $source = imagecreatefromjpeg($fileTemp); } $imageRotate = imagerotate($source, $rotation, 0); switch($fileType){ case 'image/png': $upload = imagepng($imageRotate, $filePath); break; case 'image/gif': $upload = imagegif($imageRotate, $filePath); break; default: $upload = imagejpeg($imageRotate, $filePath); } }elseif(move_uploaded_file($fileTemp, $filePath)){ $upload = 1; }else{ $statusMsg = 'Image upload failed, please try again.'; } }else{ $statusMsg = 'Sorry, only JPG/JPEG/PNG/GIF files are allowed to upload.'; } }else{ $statusMsg = 'Please select a file to upload.'; } } // Display status if($upload == 1){ echo '<h4>Image has been uploaded successfully</h4>'; echo '<img src="'.$filePath.'" width="300" height="auto" />'; }else{ echo '<h4>'.$statusMsg.'</h4>'; } ?> |
Complete HTML Code:
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>jQuery to Preview and Rotate an Image Before Upload using PHP | Tutorialswebsite </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <form method="post" action="upload.php" enctype="multipart/form-data"> <input type="file" name="file" id="file" /> <input type="hidden" name="rotation" id="rotation" value="0"/> <input type="submit" name="submit" value="Upload"/> </form> <div class="img-preview" style="display: none;"> <button id="rleft">Left</button> <button id="rright">Right</button> <div id="imgPreview"></div> </div> <script> function filePreview(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#imgPreview + img').remove(); $('#imgPreview').after('<img src="'+e.target.result+'" class="pic-view" width="300" height="auto"/>'); }; reader.readAsDataURL(input.files[0]); $('.img-preview').show(); }else{ $('#imgPreview + img').remove(); $('.img-preview').hide(); } } $("#file").change(function (){ // Image preview filePreview(this); }); </script> <script> $(function() { var rotation = 0; $("#rright").click(function() { rotation = (rotation -90) % 360; $(".pic-view").css({'transform': 'rotate('+rotation+'deg)'}); if(rotation != 0){ $(".pic-view").css({'width': '300px', 'height': 'auto'}); }else{ $(".pic-view").css({'width': 'auto', 'height': '300px'}); } $('#rotation').val(rotation); }); $("#rleft").click(function() { rotation = (rotation + 90) % 360; $(".pic-view").css({'transform': 'rotate('+rotation+'deg)'}); if(rotation != 0){ $(".pic-view").css({'width': '300px', 'height': 'auto'}); }else{ $(".pic-view").css({'width': 'auto', 'height': '300px'}); } $('#rotation').val(rotation); }); }); </script> </body> </html> |
Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request OR Chat Using Bottom Right Facebook Chat Box
Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co
